<template>
    <div class="article-container">
      <el-card class="filter-card">
        <div slot="header" class="clearfix">
  
  
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
            <el-breadcrumb-item>流量分析</el-breadcrumb-item>
          </el-breadcrumb>
  
        </div>
        <!-- 数据筛选表单 -->
        <el-form ref="form" :inline="true"  class="demo-form-inline" :model="form" label-width="100px" size="mini" >
         
          <el-form-item label="文章类型">
            <el-select v-model="channelId" placeholder="请选择">
              <el-option label="全部" :value="null"></el-option>
              <el-option :label="channel.name" :value="channel.id" v-for="(channel, index) in channels" :key="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建日期">
            <el-date-picker v-model="rangeDate" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
               format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item>
            <!--
              button 按钮的 click 事件有个默认参数
              当你没有指定参数的时候，它会默认传递一个没用的数据
             -->
            <el-button type="primary" :disabled="loading" @click="loadArticles(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- /数据筛选表单 -->
      </el-card>
  
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          根据筛选条件共查询到 {{ totalCount }} 条结果：
        </div>
        <!-- 数据列表 -->
  
        <el-table :data="articles" stripe style="width: 100%" class="list-table" size="mini" v-loading="loading">
         
          <el-table-column prop="title" label="文章标题">
          </el-table-column>
         
          <el-table-column prop="createdate" label="点击量">
          </el-table-column>
          
          <el-table-column prop="createdate" label="转发量">
          </el-table-column>
          <el-table-column prop="updatadate" label="更新时间"></el-table-column>
          <el-table-column label="操作">
            <!-- 如果需要自定义表格列模板，则把需要自定义的内容放到 template 里面 -->
            <template slot-scope="{row}">
              <el-button size="mini" round  type="primary" 
                @click="$router.push('/publish?id=' + row.id.toString())">文章详情</el-button>
            
            </template>
          </el-table-column>
        </el-table>
        <!-- /数据列表 -->
  
        <!-- 列表分页 -->
        <!--
          total 用来设定总数据的条数
          它默认按照 10 条每页计算总页码
          page-size 每页显示条目个数，支持 .sync 修饰符，默认每页 10 条
  
          90 3 90 / 3 = 30
         -->
        <el-pagination layout="prev, pager, next" background :total="totalCount" :page-size="pageSize" :disabled="loading"
          :current-page.sync="page" @current-change="onCurrentChange" />
        <!-- /列表分页 -->
      </el-card>
    </div>
  </template>
  
  <script>
  import {
    getArticles,
    getArticleChannels,
    getstatuslist,
    deleteArticle
  } from '@/api/article'
  
  export default {
    name: 'ArticleIndex',
    components: {},
    props: {},
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        articles: [], // 文章数据列表
        articleStatus: [
          { status: 0, text: '草稿', type: 'info' }, // 0
          { status: 1, text: '待审核', type: '' }, // 1
          { status: 2, text: '审核通过', type: 'success' }, // 2
          { status: 3, text: '审核失败', type: 'warning' }
        ],
        totalCount: 0, // 总数据条数
        pageSize: 10, // 每页大小
        status: null, // 查询文章的状态，不传就是全部
        statuslist: [],//状态list
        channels: [], // 文章类型列表
        channelId: null, // 查询文章的频道
        rangeDate: null, // 筛选的范围日期
        loading: true, // 表单数据加载中 loading
        page: 1 // 当前页码
      }
    },
    computed: {},
    watch: {},
    async created() {
      await this.loadstatuslist()
      this.loadChannels()
      this.loadArticles(1)
    },
    mounted() { },
    methods: {
      async loadstatuslist() {
        // 状态list
  
        const list = await getstatuslist()
        this.statuslist = list
      },
      async loadArticles(page = 1) {
        // 展示加载中 loading
        this.loading = true
        const { total_count, list } = await getArticles({
          page,
          per_page: this.pageSize,
          status: this.status,
          channel_id: this.channelId,
          begin_pubdate: this.rangeDate ? this.rangeDate[0] : null, // 开始日期
          end_pubdate: this.rangeDate ? this.rangeDate[1] : null // 截止日期
        })
        this.articles = list || []
        this.totalCount = total_count
  
        // 关闭加载中 loading
        this.loading = false
      },
  
      onSubmit() {
        console.log('submit!')
      },
  
      onCurrentChange(page) {
        this.loadArticles(page)
      },
  
     async loadChannels() {
        //获取文章类型
  
     const datas =await   getArticleChannels()
        this.channels= datas||[]
      },
  
      onDeleteArticle(articleId,index) {
        console.log(articleId)
        console.log(articleId.toString())
        this.$confirm('确认删除吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.articles.splice(index,1)
          // 确认执行这里
          // deleteArticle(articleId.toString()).then(res => {
          //   // 删除成功，更新当前页的文章数据列表
          //   this.loadArticles(this.page)
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        // 找到数据接口
        // 封装请求方法
        // 删除请求调用
        // 处理响应结果
        // console.log('onDeleteArticle')
      }
    }
  }
  </script>
  
  <style scoped lang="less">
  .filter-card {
    margin-bottom: 30px;
  }
  
  .list-table {
    margin-bottom: 20px;
  }
  
  .article-cover {
    width: 60px;
    background-size: cover;
  }
  </style>
  